<!-- 班级统计详情列表 -->
<template>
    <div class="report-detail">
        <ul class="detail-list">
            <li class="list-li clearfix" v-for="(item,index) in detailList" :key="index">
                <img class="avatar left" :src="item.Avatar ? item.Avatar : $parent.headError" alt="" :onerror="$parent.headError">
                <div class="list-con left">
                    <p>{{item.TureName}}</p>
                    <div class="user-read">
                        <div class="read-item">
                            <em>{{Math.floor(item.ReadingMinutes%3600/60)}}</em>
                            <span>累计分钟</span>
                        </div>
                        <div class="read-item">
                            <em>{{item.ReadingExperienceCount}}</em>
                            <span>阅读心得</span>
                        </div>
                        <div class="read-item">
                            <em>{{Math.round(item.AccuracyRate)}}%</em>
                            <span>挑战正确率</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'

export default {
    name: "reportDetail",
    data(){
        return{
            bookid:this.$route.query.bookid,        //当前书本
            classCode:this.$route.query.classcode,  //当前班级
            detailList:[],
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=false;
        
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.getReportDetail();
        }
        
    },
    mounted(){
    },
    methods:{
        //请求
        getReportDetail(){
            axGet('GetClassCompletion', {
                BookId:this.bookid,
                ClassCode:this.classCode,
            }).then(res => {
                if(res.ResultCode==1){
                    this.detailList=res.Value
                }
            })
        },
        
    }
}
</script>
<style type="text/css" scoped>
.detail-list{
    padding-left: 0.32rem;
}
.list-li{
    padding: 0.32rem 0 0.36rem 0.2rem;
    border-bottom: 1px solid #eeeeee;
}
.avatar{
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
}
.list-con{
    padding-top: 0.18rem;
    width: 5.7rem;
}
.list-con p{
    line-height: 1;
    font-size: 0.36rem;
    font-weight: bold;
    color: #000;
    padding-left: 0.42rem;
    white-space:nowrap; 
	overflow: hidden;
	text-overflow:ellipsis;
}
.user-read{
    display:-webkit-box;  
    display:-webkit-flex; 
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    padding-top: 0.18rem;
}
.read-item{
    width: 33.3%;
    text-align: center;
}
.user-read em{
    display: block;
    font-size: 0.32rem;
    font-weight: bold;
    height: 0.6rem;
    line-height: 0.6rem;
}
.user-read span{
    display: block;
    color: #999;
    border-right:1px solid #e0e0e0;
}
.read-item:last-child span{
    border: 0;
}
</style>